<template>
  <div id="login" :style="'width' + width + 'px;height:' + height + 'px'">
    <div style="height:150px">
    </div>
    <Row style>
      <Row>
        <Col span="8" offset="8">
          <Card style="width:auto;background:rgba(255, 255, 255, 0.5)" :bordered="false">
            <div style="text-align:center">
              <p slot="title">请登陆</p>
              <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                <FormItem prop="user">
                  <Input type="text" v-model="formInline.username" placeholder="请输入用户名">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                  </Input>
                </FormItem>
                <br>
                <FormItem prop="pwd">
                  <Input type="password" v-model="formInline.pwd" placeholder="请输入密码">
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                  </Input>
                </FormItem>
                <br>
                <FormItem>
                  <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
                </FormItem>
              </Form>
            </div>
          </Card>
        </Col>
      </Row>
    </Row>
  </div>
</template>

<script>
/* eslint-disable */
import userService from "@/service/userService";

export default {
  data() {
    return {
      width: 1000,
      height: 1000,
      formInline: {
        username: "",
        pwd: ""
      },
      ruleInline: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 3,
            message: "密码不能少于6位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit(username) {
      this.$refs[username].validate(valid => {
        if (valid) {
          let data = {
            username: this.formInline.username,
            pwd: this.formInline.pwd
          };
          userService
            .login(data)
            .then(data => {
              if (data && data.code == 0) {
                localStorage.setItem("session", data.session);
                if (data.data) {
                  if (data.data.role == 1) {
                    this.$router.push("UserList");
                  } else {
                    this.$router.push({ name: "Normal", params: data.data });
                  }
                }
                // this.$router.push("userList");
              } else {
                if (data) {
                  this.$Message.error(data.msg);
                } else {
                  this.$Message.error("登录失败！");
                }
              }
            })
            .catch(e => {
              console.log(e);
            });
        } else {
          this.$Message.error("请输入用户名和密码");
        }
      });
    }
  },
  mounted() {
    this.width = window.screen.availWidth;
    this.height = window.screen.availHeight;
  }
};
</script>

<style>
#login {
  background: url("../assets/login.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
  background-clip: content-box;
}
</style>
